<!--  -->
<template>
  <div class=''>
    <el-form :model="cardDataForm"
             :rules="cardDataRule"
             ref="cardDataForm"
             label-width="108px"
             size="mini"
             :inline="false"
             label-position="top">
      <el-row>
        <el-col>
          <el-form-item label="会员卡号"
                        prop="cardNumber">
            <!-- show-word-limit -->
            <el-input v-model="cardDataForm.cardNumber"
                      placeholder="会员卡号"
                      maxlength="8"
                      style="width:200px"></el-input>
          </el-form-item>
          <el-form-item label="会员类型">
            <el-select v-model="cardDataForm.cardTypeId"
                       placeholder="请选择"
                       @change="cardTypeChange">
              <el-option v-for="item in cardtyps"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="有效日期"
                        prop="expDate">
            <el-date-picker v-model="cardDataForm.expDate"
                            type="datetime"
                            placeholder="选择有效日期"
                            style="width:278px"></el-date-picker>
          </el-form-item>
          <el-form-item label="办卡日期"
                        prop="issueDate">
            <el-date-picker v-model="cardDataForm.issueDate"
                            type="datetime"
                            placeholder="选择办卡日期"
                            style="width:278px"></el-date-picker>
          </el-form-item>
          <el-form-item label="座位号码"
                        prop="seat">
            <el-input v-model="cardDataForm.seat"
                      placeholder="座位号码"
                      style="width:278px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item>
          <el-button type="primary"
                     size="small"
                     @click="cardDataFormSubmit"
                     :disabled="saveBtnDisable"
                     v-if="isAuth('member:member:card-update')">更新会员卡</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      // 保存按钮禁用状态
      saveBtnDisable: false,
      cardtyps: [], // 会员卡类型数组
      cardtype: '',

      cardDataForm: {
        id: 0,
        memberId: '',
        cardNumber: '',
        cardTypeId: '',
        cardTypeName: '',
        expDate: '',
        issueDate: '',
        seat: ''
      },
      cardDataRule: {
        memberId: [{ required: true, message: '会员资料编号不能为空', trigger: 'blur' }],
        cardNumber: [{ required: true, message: '会员卡号不能为空', trigger: 'blur' }],
        cardTypeId: [{ required: true, message: '会员类型编号不能为空', trigger: 'blur' }],
        cardTypeName: [{ required: true, message: '会员类型名称不能为空', trigger: 'blur' }],
        expDate: [{ required: true, message: '有效日期不能为空', trigger: 'blur' }],
        issueDate: [{ required: true, message: '办卡日期不能为空', trigger: 'blur' }]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    init (id) {
      this.$nextTick(() => {
        this.cardDataForm.memberId = id || 0
        // 重置表单字段
        // this.$refs['cardDataForm'].resetFields()
        if (this.cardDataForm.memberId) {
          if (this.cardDataForm.id) {
            return
          }
          // 根据会员资料ID查询
          this.$http({
            url: this.$http.adornUrl(`/member/card/select/member_id/${this.cardDataForm.memberId}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              // console.log(data)
              if (!data.data) {
                this.saveBtnDisable = true
                this.$message({
                  message: '会员卡数据不存在',
                  duration: 1500,
                  onClose: () => {
                    // 隐藏弹出窗体
                    this.$emit('setVisible', false)
                    // 刷新列表
                    this.$emit('refreshDataList')
                  }
                })
                return !1
              }

              this.cardDataForm.id = data.data.id
              this.cardDataForm.memberId = data.data.member_id
              this.cardDataForm.cardNumber = data.data.card_number
              this.cardDataForm.cardTypeId = data.data.card_type_id
              this.cardDataForm.cardTypeName = data.data.card_type_name
              this.cardDataForm.expDate = new Date(data.data.exp_date * 1000)
              this.cardDataForm.issueDate = new Date(data.data.issue_date * 1000)
              this.cardDataForm.seat = data.data.seat
              // console.log(this.cardDataForm)
            }
          })
        }
      })
    },
    // 查询会员卡类型
    getCardType () {
      this.$http({
        url: this.$http.adornUrl(`/member/cardtype/list`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.cardtyps = data.page.list
        }
      })
    },
    // 选择的会员卡类型
    cardTypeChange (id) {
      this.cardDataForm.cardTypeName = this.cardtyps.find((item) => {
        return item.id === id
      }).name
    },
    // 表单提交
    cardDataFormSubmit () {
      this.$refs['cardDataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/member/card/update`),
            method: 'post',
            data: this.$http.adornData({
              id: this.cardDataForm.id || undefined,
              memberId: this.cardDataForm.memberId,
              cardNumber: this.cardDataForm.cardNumber,
              cardTypeId: this.cardDataForm.cardTypeId,
              cardTypeName: this.cardDataForm.cardTypeName,
              expDate: this.cardDataForm.expDate ? this.cardDataForm.expDate.getTime() / 1000 : '',
              issueDate: this.cardDataForm.issueDate ? this.cardDataForm.issueDate.getTime() / 1000 : '',
              seat: this.cardDataForm.seat,
              updatedBy: this.$store.state.user.name
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              for (var item in this.cardrDataForm) {
                this.cardDataForm[item] = null
              }
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped>
</style>